<template>
	<el-date-picker
		ref="elDatePicker"
		class="com"
		v-model="fieldValue"
		:shortcuts="shortcuts"
		:format="valueFormat"
		:valueFormat="valueFormat"
		clearable
		:editable="false"
		unlink-panels
		placeholder="请选择..."
		rangeSeparator="至"
		startPlaceholder="开始日期"
		endPlaceholder="结束日期"
		v-bind="$attrs"
	>
		<template v-for="slotKey in Object.keys($slots)" :key="slotKey" v-slot:[slotKey]>
			<slot :name="slotKey"></slot>
		</template>
	</el-date-picker>
</template>

<script setup name="MyDatePicker">
import { date } from '@u/date';
const emits = defineEmits(['update:modelValue']),
	/***
	 * props
	 * @property {String} modelValue 默认值
	 * @property {Boolean} now 是否默认为当前时间——默认为false
	 * @property {Boolean} autoshortcuts 是否添加默认规则的autoshortcuts，默认为true
	 */
	props = defineProps({
		modelValue: {
			type: [String, Array, Date]
		},
		now: {
			type: Boolean,
			defaut: false
		},
		autoshortcuts: {
			type: Boolean,
			default: true
		}
	});

let isArray = null,
	attrs = useAttrs();

let valueFormat = computed(() => {
		if (attrs['value-format']) {
			return attrs['value-format'];
		} else {
			if (new RegExp('time', 'gi').test(attrs.type)) {
				return 'YYYY-MM-DD HH:mm:ss';
			} else if (new RegExp('year', 'gi').test(attrs.type)) {
				return 'YYYY';
			} else if (new RegExp('month', 'gi').test(attrs.type)) {
				return 'YYYY-MM';
			} else {
				return 'YYYY-MM-DD';
			}
		}
	}),
	fieldValue = computed({
		get() {
			if (isArray == null) isArray = Array.isArray(props.modelValue) || new RegExp('range', 'gi').test(attrs.type);
			if (props.modelValue) return props.modelValue;
			if (props.now)
				return isArray
					? [date(new Date(), valueFormat.value, { D: -7 }), date(new Date(), valueFormat.value)]
					: date(new Date(), valueFormat.value);
		},
		set(val) {
			if (val == null) {
				emits('update:modelValue', isArray ? [] : '');
			} else {
				emits('update:modelValue', val);
			}
		}
	}),
	shortcuts = computed(() => {
		if (props.autoshortcuts) {
			if (['datetimerange', 'daterange'].includes(attrs.type)) {
				return [
					{
						text: '最近一周',
						value: () => {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							return [start, end];
						}
					},
					{
						text: '最近一个月',
						value: () => {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							return [start, end];
						}
					},
					{
						text: '最近三个月',
						value: () => {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							return [start, end];
						}
					}
				];
			} else {
				return [
					{
						text: '今天',
						value: () => {
							return new Date();
						}
					},
					{
						text: '昨天',
						value: () => {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							return date;
						}
					},
					{
						text: '一周前',
						value: () => {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							return date;
						}
					}
				];
			}
		} else {
			return attrs['shortcuts'];
		}
	});
</script>

<style scoped lang="scss">
.el-date-editor.el-input {
	width: 100%;
}
</style>
